<template>
    <div class="statis">
        <div class="statis_show" v-if="!show">
            <div class="statis_top">
                <div class="top_tit">今日统计</div>
                <div class="top_menu">
                    <div class="menu_num">
                        <div class="number on">{{info.today_add_agent_sum}}</div>
                        <div class="catname">新增推荐官</div>
                    </div>
                    <div class="menu_num">
                        <div class="number on">{{info.today_add_user_sum}}</div>
                        <div class="catname">新增用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_paid_user_sum}}</div>
                        <div class="catname">支付用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_paid_order_sum}}</div>
                        <div class="catname">支付订单</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_pay_amount}}</div>
                        <div class="catname">今日流水</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_commission}}</div>
                        <div class="catname">佣金</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_margin}}</div>
                        <div class="catname">毛利</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.today_user_per_price}}</div>
                        <div class="catname">客单价</div>
                    </div>
                    <div class="menu_num">

                    </div>
                </div>
            </div>
            <div class="tit">昨日统计</div>
            <div class="top_menu">
                    <div class="menu_num">
                        <div class="number on">{{info.yes_add_agent_sum}}</div>
                        <div class="catname">新增推荐官</div>
                    </div>
                    <div class="menu_num">
                        <div class="number on">{{info.yes_add_user_sum}}</div>
                        <div class="catname">新增用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_paid_user_sum}}</div>
                        <div class="catname">支付用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_paid_order_sum}}</div>
                        <div class="catname">支付订单</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_pay_amount}}</div>
                        <div class="catname">昨日流水</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_commission}}</div>
                        <div class="catname">佣金</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_margin}}</div>
                        <div class="catname">毛利</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.yes_user_per_price}}</div>
                        <div class="catname">客单价</div>
                    </div>
                    <div class="menu_num">

                    </div>
            </div>
            <div class="tits">本周统计(周六00:00-现在)</div>
            <div class="top_menu">
                    <div class="menu_num">
                        <div class="number on">{{info.week_add_agent_sum}}</div>
                        <div class="catname">新增推荐官</div>
                    </div>
                    <div class="menu_num">
                        <div class="number on">{{info.week_add_user_sum}}</div>
                        <div class="catname">新增用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_paid_user_sum}}</div>
                        <div class="catname">支付用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_paid_order_sum}}</div>
                        <div class="catname">支付订单</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_pay_amount}}</div>
                        <div class="catname">本周流水</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_commission}}</div>
                        <div class="catname">佣金</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_margin}}</div>
                        <div class="catname">毛利</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.week_user_per_price}}</div>
                        <div class="catname">客单价</div>
                    </div>
                    <div class="menu_num">

                    </div>
            </div>            
            <div class="tits">当月统计</div>
            <div class="top_menu">
                    <div class="menu_num">
                        <div class="number on">{{info.month_add_agent_sum}}</div>
                        <div class="catname">新增推荐官</div>
                    </div>
                    <div class="menu_num">
                        <div class="number on">{{info.month_add_user_sum}}</div>
                        <div class="catname">新增用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_paid_user_sum}}</div>
                        <div class="catname">支付用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_paid_order_sum}}</div>
                        <div class="catname">支付订单</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_pay_amount}}</div>
                        <div class="catname">本月流水</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_commission}}</div>
                        <div class="catname">佣金</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_margin}}</div>
                        <div class="catname">毛利</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.month_user_per_price}}</div>
                        <div class="catname">客单价</div>
                    </div>
                    <div class="menu_num">

                    </div>
            </div>
            <div class="tits">历史累计</div>
            <div class="top_menu">
                    <div class="menu_num">
                        <div class="number on">{{info.total_agent_sum}}</div>
                        <div class="catname">总推荐官</div>
                    </div>
                    <div class="menu_num">
                        <div class="number on">{{info.total_user_sum}}</div>
                        <div class="catname">总用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_paid_user_sum}}</div>
                        <div class="catname">总支付用户</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_paid_order_sum}}</div>
                        <div class="catname">总订单</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_amount}}</div>
                        <div class="catname">总流水</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_commission}}</div>
                        <div class="catname">总佣金</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_margin}}</div>
                        <div class="catname">总毛利</div>
                    </div>
                    <div class="menu_num">
                        <div class="number">{{info.total_user_per_price}}</div>
                        <div class="catname">客单价</div>
                    </div>
                    <div class="menu_num">

                    </div>
            </div>  
            <div class="choose">
                <div :class="[idx==1?'activity':'','hot']" @click="choose(1)">本月热销TOP20<div class="line"></div> </div>    
                <div :class="[idx==2?'activity':'','recom']" @click="choose(2)">本月推荐官TOP20
                    <div class="line"></div>    
                </div>  
                <div :class="[idx==3?'activity':'','clickNum']" @click="choose(3)">本周商品点击量
                    <div class="line"></div>    
                </div>  
                <div :class="[idx==4?'activity':'','clickNum']" @click="choose(4)">渠道
                    <div class="line"></div>    
                </div>  
            </div>      
            <div class="date"  v-if="idx==4">
                <div :class="[date=='1601913600'?'date_one':'','date_div']"  @click="select(1601913600)">10月6号</div>
                <div :class="[date=='1602000000'?'date_one':'','date_div']"  @click="select(1602000000)">10月7号</div>
                <div :class="[date=='1602086400'?'date_one':'','date_div']"  @click="select(1602086400)">10月8号</div>
            </div>
            <div class="list" v-if="idx==1">
                <div class="info" v-for="(item, index) in info.good_list" :key="index">
                    <div :class="[index==0?'num1':'',index==1?'num2':'',index==2?'num3':'','info_num']">TOP{{index+1}}</div>     
                    <div class="info_tit">{{item.name}}</div>  
                    <div class="info_price">
                        <div class="info_sale">销售数量:{{item.month_sales}}</div>
                        <div class="price">销售金额:{{item.sale_price}}</div>
                        <!-- <div class="gross">毛利:{{item.margin}}</div> -->
                    </div>
                </div>                  
            </div>
            <div class="list" v-if="idx==4">
                <div class="info" v-for="(item, index) in dateList" :key="index">
                    <div :class="[index==0?'num1':'',index==1?'num2':'',index==2?'num3':'','info_num']">TOP{{index+1}}</div>     
                    <div class="info_tit">{{item.goods_name}}</div>  
                    <div class="info_price">
                        <div class="info_sale">订单数量:{{item.order_sum}}</div>
                        <div class="price">商品数量:{{item.goods_num}}</div>
                        <!-- <div class="gross">毛利:{{item.margin}}</div> -->
                    </div>
                </div>                  
            </div>
            <div class="lists" v-if="idx==2">
                <div class="infos" v-for="(item, index) in info.agent_list" :key="index">
                    <div class="infos_main">
                        <div class="infos_left">
                            <div :class="[index==0?'num1':'',index==1?'num2':'',index==2?'num3':'','infos_num']">TOP{{index+1}}</div>
                            <div class="infos_name">{{item.nickname}}</div>
                            <div class="infos_tel">手机号:{{item.mobile}}</div>
                        </div>
                        <div class="infos_right">
                            <img :src="item.head_pic?item.head_pic:'/static/picture/head_img.png'" class="right_pic">
                        </div>
                    </div>
                    <div class="infos_price">
                        <div class="team_sale">团队销售额:{{item.total_amount}}</div>
                        <div class="team_fans">粉丝数:{{item.fans}}</div>
                    </div>
                </div>
            </div>  
            <div class="list" v-if="idx==3">
                <div class="info" v-for="(item, index) in goods" :key="index">
                    <div :class="[index==0?'num1':'',index==1?'num2':'',index==2?'num3':'','info_num']">TOP{{index+1}}</div>     
                    <div class="info_tit">{{item.goods.name}}</div>  
                    <div class="info_price">
                        <div class="info_id">商品id：{{item.goods_id}}</div>
                        <div class="info_sale">销售数量:{{item.goods.sales}}</div>                
                        <div class="price">点击次数:{{item.total_click_num}}</div>
                        <!-- <div class="gross">毛利:{{item.margin}}</div> -->
                    </div>
                </div>                  
            </div>        
        </div>
        <div class="statis_no"  v-if="show">
                <img src="/static/picture/detail_null.png" class="no_pic">
                <div class="no_title">暂无权限</div>
        </div>      
    </div>    
</template>
<script>
export default {
    name: 'Statistics',
        data () {
             return {
                 token:'',
                 idx:1,
                 info:[],
                 show:false,
                 time:0,
                 page:1,
                 limit:20,
                 goods:[],
                 load:true,
                 date:1601913600,
                 dateList:[],
             }
        },
         methods:{
            getStatic(){
                let that=this;
                that.$axios.get('/mall/v1/statistics/data',{
                params: {
                    time:that.time,
                },
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                    Authorization: "bearer " + this.token
                }
            }).then(res => {
                    if(res.data.code==200){
                            var res=res.data;
                            if(res.data.length!==0){
                                that.show=false;
                            }else{
                                that.show=true;
                            }
                            that.info=res.data;
                    }else if(res.data.code==10000){
                        that.$router.push({path:'/login'}); 
                    }else{
                       Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                }); 
            },
            choose(e){
                let that=this;
                that.idx=e;
                that.page=1;
                if(e==3){
                    that.getList();
                }else if(e==4){
                    that.getChannel();
                }else{
                    that.getStatic();
                }
            },
            select(e){
                this.date=e;
                this.getChannel();
            },
            getChannel(){
                let that=this;
                this.$axios.get("/mall/v1/statistics/channelOrderData",{
                    params:{
                        day_time:that.date,
                    },
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                        Authorization: "bearer " + this.token
                    }
                }).then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        this.dateList=data;
                    }else{
                         Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                });
            },
            getList(){
                let that=this;
                this.$axios.get("/mall/v1/statistics/getWeekPageClick",{
                    params:{
                        page:that.page,
                        limit:20,
                    },
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                        Authorization: "bearer " + this.token
                    }
                }).then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        this.goods=data;
                        this.scroll(this.goods);
                    }else{
                    Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                });
            },
            scroll(goods) {
                let flag = false;
                if(!this.load){
                    return false;
                }
                window.onscroll = () => {
                    let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                    let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                    let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                    let bottomOfWindow =top + vh >= height;
                        if(bottomOfWindow&&flag==false){
                            flag=true;
                            this.page++;
                                var that = this;
                                that.load=true;
                                var params = {
                                    page: that.page,
                                    limit:2,
                                }
                                this.$axios.get( //传参发起请求
                                    '/mall/v1/statistics/getWeekPageClick', {
                                        params,
                                        headers: {
                                            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                                            Authorization: "bearer " + this.token
                                        }
                                    }
                                ).then(function (response) { //接口返回数据
                                var data=response.data.data;
                                   if(data.length<20){
                                        that.load=false;
                                    }else{
                                        for(var i =0;i<data.length;i++){
                                            goods.push(data[i]);
                                        };  
                                         that.load=true;                       
                                    }
                                }, response => {
                                    console.log("error");
                                });
                            }
                }
            },          
         },
         created(){
            document.title="业务报表";
            if (localStorage.token) {
                this.token=localStorage.getItem('token');
            }else{
               this.$router.push({path:'/login'}); 
               return false;
            }
            if(this.$route.query.time){
                this.time=this.$route.query.time;
            }else{
                this.time=0;
            }
             this.getStatic();
         },       
}
</script>
<style scoped>
.statis{background:#F8F8F8;}
.statis_top{width:100%;height:418px;background:#F8F8F8 url(/static/images/statistics.png) no-repeat center center;background-size:100% 100%;}
.top_tit{font-size:32px;color:#FFFFFF;font-weight: bold;width:702px;margin:0 auto;margin-bottom:24px;padding-top:90px;}
.top_menu{width:626px;margin:0 auto;background:#FFFFFF;border-radius:24px;padding:32px 38px;}
.top_menu{display: flex;justify-content:space-between;align-items: center;flex-wrap:wrap;}
.menu_num{width:243px;margin-bottom:44px;}
.menu_num:nth-child(3n){width:130px;}
.number{margin-bottom:12px;font-size:32px;color:#333334;font-weight:bold;}
.number.on{color:#FE3B30;}
.catname{font-size:24px;color:#9B9B9B;}
.tit{font-size:32px;color:#333334;font-weight: bold;width:702px;margin:0 auto;margin-top:230px;margin-bottom:24px;}
.tits{font-size:32px;color:#333334;font-weight: bold;width:702px;margin:0 auto;margin-top:44px;margin-bottom:24px;}
.choose{width:702px;margin:0 auto;display: flex;justify-content:flex-start;align-items: center;font-size:24px; color:#9B9B9B;font-weight: bold;margin-top:58px;}
.activity{font-size:28px;color:#333334;margin-top:6px;}
.recom{margin-left:20px;}
.clickNum{margin-left:20px;}
.activity .line{width:32px;height:8px;background:rgba(254,68,55,1);border-radius:4px;margin:0 auto;margin-top:8px;}
.list{margin-top:20px;padding-bottom:120px;}
.info_price{display: flex;justify-content:space-between;align-items: center;margin-top:20px;}
.info{width:656px;height:184px;background:rgba(255,255,255,1);border-radius:24px;margin:0 auto;padding:0 18px 28px;margin-top:20px;}
.info_num{font-size:24px;font-weight:bold;padding-top:26px;color:#333334;}
.info_tit{width:100%;height:40px;font-size:28px;color:#000000;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;margin-top:8px;}
.info_sale{font-size:28px;color:#9B9B9B;}
.info_id{font-size:28px;color:#333334;}
.price{color:#FF2741;font-size:28px;}
.gross{font-size:28px;color:#2A9DFF;}
.infos{width:656px;height:224px;background:rgba(255,255,255,1);border-radius:24px;margin:0 auto;padding:0 18px 28px;margin-top:20px;}
.infos_main{display: flex;justify-content: space-between;}
.infos_price{display: flex;justify-content: space-between;margin-top:28px;}
.right_pic{width:86px;height:86px;border-radius:50%;}
.infos_num{font-size:24px;font-weight:bold;padding-top:26px;color:#333334;}
.infos_name{font-size:28px;color:#000000;font-weight:600;margin-top:10px;}
.infos_tel{font-size:28px;color:#9B9B9B;margin-top:10px;}
.infos_right{margin-top:40px;}
.team_sale{font-size:28px;color:#FF2741;}
.team_fans{font-size:28px;color:#2A9DFF;}
.lists{margin-top:20px;padding-bottom:120px;}
.num1{color:#8E6BE1;}
.num2{color:#E39752;}
.num3{color:#2A9DFF;}
.statis_no{text-align:center;background:#F8F8F8;position: fixed;width:100%;height:100%;}
.no_pic{width:456px;height:420px;margin-top:400px;}
.no_title{color:#9B9B9B;font-size:28px;text-align:center;margin-top:20px;}
.date{display: flex;justify-content: flex-start;align-items: center;width:702px;margin:0 auto;margin-top:20px;}
.date_div{width:100px;height:60px;line-height:60px;text-align: center;font-size:24px;color:#333334;margin-right:40px;border-radius:8px;border:1px solid #DD0842;}
.date_one{background:#DD0842;color:#FFFFFF;}
</style>